<template>
	<div class="task_overview" v-loading="loading">
		<div class="task_overview_data">
			<overview-data title="音视频转码服务" layout="left" :data="transcodingData"></overview-data>
			<overview-data title="PDF转码服务" layout="right" :data="approvalData"></overview-data>
		</div>
		<div class="task_num_statistics">
			<el-radio-group size="mini" v-model="timeRanges">
				<el-radio-button label="1">今天</el-radio-button>
				<el-radio-button label="2">昨天</el-radio-button>
				<el-radio-button label="3">本月</el-radio-button>
				<el-radio-button label="4">上月</el-radio-button>
			</el-radio-group>
			<overview-charts :data="chartsData"></overview-charts>
		</div>
		<div class="task_functional">
			<el-row :gutter="16">
				<el-col :span="6" v-for="(item, index) in functionalData" :key="index">
					<task-functional :data="item" @hand="handleFunControl"></task-functional>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script>
import overviewData from './data';
import overviewCharts from './charts';
import taskFunctional from './functional';
import { getConvertStatData, getConvertStatByType } from '@/api/task/tbSysMqRecord';
export default {
	components: { overviewData, taskFunctional, overviewCharts },
	data() {
		return {
			loading: false,
			transcodingData: [],
			approvalData: [],
			functionalData: [
				{ label: '视频剪辑', icon: 'el-icon-video-camera', status: '1' },
				{ label: '基础编辑', icon: 'el-icon-video-camera', status: '2' },
				{ label: '视频合并', icon: 'el-icon-video-camera', status: '2' },
				{ label: '混合编辑', icon: 'el-icon-video-camera', status: '1' }
			],
			timeRanges: '1',
			chartsData: {}
		};
	},
	watch: {
		timeRanges(value) {
			this.getConvertChartData(value);
		}
	},
	async mounted() {
		this.loading = true;
		await this.getConvertStatRecord();
		this.loading = false;
	},
	methods: {
		//获取转码数据
		async getConvertStatRecord() {
			let result = await getConvertStatData().then((res) => res.data);
			if (result.code === '0') {
				let datas = !!result.data && result.data.length > 0 ? result.data[0] : {};
				this.chartsData = datas.result;
				this.transcodingData = datas.statList.filter((item) => item.type === '3');
				this.approvalData = datas.statList.filter((item) => item.type === '1');
			}
		},

		//获取转码图表数据
		async getConvertChartData(type) {
			let result = await getConvertStatByType(type).then((res) => res.data);
			if (result.code === '0') {
				this.chartsData = !!result.data && result.data.length > 0 ? result.data[0] : {};
			}
		},

		//功能操作
		handleFunControl(status) {
			console.log(status);
		}
	}
};
</script>

<style lang="scss" scoped>
.task_overview {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.task_overview_data {
	display: flex;
	height: 210px;
	padding: 15px;
	border-bottom: solid 15px #f7f8f9;
	background: url('~@/assets/img/bg_task_top.png');
	background-size: cover;
	background-color: #ccc;
}

.task_num_statistics::v-deep {
	position: relative;
	flex: 1;
	overflow: hidden;
	min-height: 384px;
	padding: 16px 0 0 0;

	.el-radio-group {
		position: absolute;
		top: 16px;
		right: 16px;
		background-color: #eef1f5;
		z-index: 2;
		padding: 4px;
	}

	.el-radio-button__inner {
		color: #303133;
		border: none;
		box-shadow: none;
		padding: 6px 10px;
		background: transparent;
	}

	.is-active .el-radio-button__inner {
		border-radius: 4px;
		background-color: #fff;
	}
}

.task_functional {
	padding: 0 15px 15px;
	flex-shrink: 0;
}
</style>
